<template>
  <div style="width: 1000px; margin: 50px auto">
    <el-button type="primary" @click="handleAddItem">添加</el-button>
    <!-- :default-value="{ name: 'xxxx', age: 18, state: 'view' }" -->
    <EasyTable
      ref="easyTableRef"
      :data="orderList"
      border
      shadow
      :add-method="easyAddMethod"
      @expand="handleExpand"
      @expand-submit="handleExpandSubmit"
      @expand-cancel="handleExpandCancel"
      @add="handleAdd"
      @save="handleSave"
      @edit="handleEdit"
      @copy="handleCopy"
      @del="handleDel"
      @add-expand="handleAddExpand"
    >
      <EasyTableColumn type="expand" v-slot="{ row }">
        <div
          class="expand"
          style="padding: 0 20px; margin-bottom: 10px"
        >
          <!-- 内部table -->
          <ExtraTable
            :data="row.products"
            :expand-id="row.__id__"
            border
          >
            <!-- <ExtraTable :data="productList"> -->
            <ExtraTableColumn prop="name" label="语言">
            </ExtraTableColumn>

            <ExtraTableColumn
              prop="frame"
              label="框架"
              v-slot="{ row }"
            >
              <ElInput v-model="row.frame" size="small"></ElInput>
            </ExtraTableColumn>

            <ExtraTableColumn operation> </ExtraTableColumn>

            <ExtraTableColumn extra v-slot="{ row, index }">
              <div style="padding: 0px 20px; margin-bottom: 10px">
                <ExtraInput
                  v-model="row.version"
                  :index="index"
                  size="small"
                ></ExtraInput>
              </div>
            </ExtraTableColumn>
          </ExtraTable>

          <!-- <el-button size="small">确定</el-button>
          <el-button size="small">取消</el-button> -->
        </div>
      </EasyTableColumn>

      <EasyTableColumn prop="name" label="姓名" width="100px">
      </EasyTableColumn>

      <EasyTableColumn
        prop="age"
        label="年龄"
        v-slot="{ row }"
        :width="100"
      >
        <ElInput v-model="row.age"></ElInput>
      </EasyTableColumn>

      <EasyTableColumn prop="state" label="状态" v-slot="{ row }">
        <ElInput v-model="row.state"></ElInput>
      </EasyTableColumn>

      <EasyTableColumn operation :addExpand="{ label: '添加订单' }">
        <el-button type="primary" size="small">审批</el-button>
      </EasyTableColumn>
    </EasyTable>
  </div>
</template>

<script setup lang="ts">
import { ElInput } from 'element-plus';
import {
  EasyTable,
  EasyTableColumn,
  type expand,
  type expandSubmit,
  type addExpand,
} from '@/components/easy-table';
import {
  ExtraTable,
  ExtraTableColumn,
  ExtraInput,
} from '@/components/extra-table';
import { nextTick, ref } from 'vue';

const orderList = ref([
  {
    name: '张三',
    age: 18,
    state: 'view',
    products: [
      {
        name: 'java',
        frame: 'spring',
        version: '1.8',
        state: 'view',
      },
      {
        name: 'java',
        frame: 'spring',
        version: '1.8',
        state: 'view',
      },
      {
        name: 'java',
        frame: 'spring',
        version: '1.8',
        state: 'view',
      },
    ],
  },
  {
    name: '李四',
    age: 35,
    state: 'view',
    products: [
      // {
      //   name: 'java',
      //   frame: 'spring',
      //   version: '1.8',
      //   state: 'solid',
      // },
    ],
  },
  {
    name: '王五',
    age: 8,
    state: 'solid',
    products: [
      // {
      //   name: 'java',
      //   frame: 'spring',
      //   version: '1.8',
      //   state: 'solid',
      // },
    ],
  },
]);

const handleExpand: expand = (_, context) => {
  // setTimeout(() => {
  //   context?.setData([
  //     {
  //       name: 'java',
  //       frame: 'spring',
  //       version: '1.8',
  //       state: 'solid',
  //     },
  //   ]);
  // }, 1000);
};
const handleAdd = () => {
  console.log('handleAdd');
};
const handleSave = () => {
  console.log('handleSave');
};
const handleEdit = () => {
  console.log('handleEdit');
};
const handleCopy = () => {
  console.log('handleCopy');
};
const handleDel = () => {
  console.log('handleDel');
};
const handleExpandSubmit: expandSubmit = (data, context) => {
  console.log('handleExpandSubmit', data, context?.getData());
};
const handleExpandCancel: expandSubmit = (data, context) => {
  console.log('handleExpandCancel', data, context?.getData());
};
const handleAddExpand: addExpand = (data, expand) => {
  expand?.add({
    name: 'Vue',
    frame: 'spring',
    version: '1.8',
    state: 'solid',
  });
};

const easyTableRef = ref();
const handleAddItem = () => {
  console.log('handleAddItem', easyTableRef);
  // easyTableRef.value.add({ name: 'ttt', age: 18, state: 'view' });
  easyTableRef.value.add();
};

const easyAddMethod = () => {
  return { name: 'zzz', age: 18, state: 'view' };
};
</script>

<style scoped></style>
